<template>
  <div class="homepage-container" v-if="withHeader">
    <a-layout :style="{background: '#fff'}">
      <a-layout-header class="header">
        <div class="page-title">
          <router-link to="/">慕课乐高</router-link>
        </div>
        <user-profile :user="user"></user-profile>
      </a-layout-header>
      <a-layout-content class="home-layout">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
    <a-layout-footer>
      © 慕课网（imooc.com）版权所有 | 津ICP备20000929号-2
    </a-layout-footer>
  </div>
  <div class="homepage-container" v-else>
    <router-view></router-view>
  </div>

</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex';
import { GlobalDataProps } from '@/store';
import UserProfile from '@/components/UserProfile.vue';
import { useRoute } from 'vue-router';
export default defineComponent({
  name: 'Index',
  components: {
    UserProfile
  },
  setup () {
    const store = useStore<GlobalDataProps>();
    const route = useRoute();
    const withHeader = computed(() => route.meta.withHeader);
    const user = computed(() => store.state.user);
    
    return {
      user,
      withHeader
    };
  }
});
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-title {
  color: #fff;
}
</style>